<template>
  <div class="classroom-menu-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeRoute" class="el-menu-vertical-demo" :router="true"
               v-if="isOnlineStudy">
        <el-menu-item v-for="menu in $store.state.classroom.onlineStudy" :key="menu.path" :index="menu.path">
          <span slot="title">{{menu.menuName}}</span>
        </el-menu-item>
      </el-menu>
      <el-menu :default-active="activeRoute" class="el-menu-vertical-demo" :router="true"
               v-else>
        <el-menu-item v-for="menu in menuList" :key="menu.path" :index="menu.path">
          <span slot="title">{{menu.menuName}}</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import menus from '@/utils/classroomMenus'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      menuList: [],
      activeRoute: ''
    }
  },
  computed: {
    isOnlineStudy() {
      return this.$route.meta.topMenu == 'onlineStudy'
    },
    ...mapGetters(['onlineStudy'])
  },
  watch: {
    '$store.state.classroom.onlineStudy': {
      deep: true,
      immediate: true,
      handler(list) {
        if (this.$route.meta.topMenu != 'onlineStudy') {
          return
        }
        const code = this.$route.query.menuCode
        if (code) {
          const obj = list.find((item) => item.path.indexOf(code) !== -1)
          this.activeRoute = obj && obj.path
        } else {
          this.activeRoute = list[0] && list[0].path
        }
      }
    },
    '$route.meta': {
      deep: true,
      immediate: true,
      handler(meta) {
        const menuRoute = this.$route
        if (meta.topMenu == 'onlineStudy') { // 在线学习的菜单需要通过后台管理-目录管理页面配置
          this.menuList = this.onlineStudy
          const path = this.$route.query.menuPath
          if (path) { // 路由query中存在 menuPath 字段 选中项 替换为这个字段 (用于视频播放页)
            this.activeRoute = path
            return
          }
          const code = this.$route.query.menuCode
          if (code) { // 路由query中存在 menuCode 选中项从菜单列表中查询保护这个字段的path所在项, 替换选中为该项配置
            const obj = this.menuList.find((item) => item.path.indexOf(code) !== -1)
            this.activeRoute = obj && obj.path
          } else { // 若没有默认选中第一个
            this.activeRoute = this.menuList[0] && this.menuList[0].path
          }
          return
        }
        // 除 在线学习 外的菜单正常处理
        this.menuList = menus[meta.topMenu]
        this.activeRoute = menuRoute.path
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/framework/styles/element-variables.scss';
.classroom-menu-wrapper {
  position: fixed;
  top: 82px;
  left: 0;
  right: 0;
  z-index: 8;
  height: 100%;
  width: 278px;
  min-width: 278px;
  background: #fff;
  box-shadow: 0 3px 6px #b9ceed;
  z-index: 999;
  overflow: hidden;
  .el-scrollbar {
    height: 100% !important;
  }
}
</style>
<style lang="scss">
.classroom-menu-wrapper {
  .el-menu-item {
    position: relative;
    font-size: 20px;
    height: 66px;
    line-height: 59px;
    padding-left: 50px !important;
    i {
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
  }
  .el-menu-item.is-active {
    color: #004FFF;
    background-color: #edf2fc;
    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      right: 0;
      height: 100%;
      width: 4px;
      background-color: #004FFF;
    }
  }
  .el-menu-item:focus, .el-menu-item:hover {
    background-color: #edf2fc !important;
  }
}
</style>
